<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type=text/javascript src="../../vue.js"></script>
	</head>
	<body>
		<div id="app">
			<parent></parent>
		</div>
        <script>
		    const {ref, watchEffect, toRaw} = Vue;

            const app = Vue.createApp({data(){return {test1:1}}});
        	app.component('parent', {
        		data(){
        			return {
        				price: 188
        			}
        	    },
        	    computed: {
        	  	    totalPrice(){
        	  		    return this.price * 10;
        	  	    }
        	    },
        	    methods: {
        	  	    hello(){
        	  		    return "Hello, Java无难事";
        	  	    }
        	    },
        		template: '<child></child>'
        	})
        	
        	app.component('child', {
        	    methods: {
                    accessParent(){
						console.log("this =  ",this.$root.test1);
						console.log("toRaw(this.$parent.$data) = ",toRaw(this.$parent.$data));
						console.log("this.$parent.$data = ",this.$parent.$data);
						console.log("this.$parent = ",this.$parent);
                        console.log("单价：" + this.$parent.price)
                        console.log("总价：" + this.$parent.totalPrice);
                        console.log(this.$parent.hello());
                    }
                },
        		template: '<button @click="accessParent">访问父组件实例</button>'
        	})
            
            app.mount('#app')
			
			
        </script>
	</body>
</html>